<template>
  <el-card class="box-card">
  <el-form
      ref="ruleForm"
      :model="registerForm"
      :rules="rules"
      label-width="120px"
      class="demo-ruleForm"
  >
    <el-form-item label="用户名" prop="username">
      <el-input v-model="registerForm.username"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input type="password" v-model="registerForm.password"></el-input>
    </el-form-item>
    <el-form-item label="氏族" prop="team">
      <el-select v-model="registerForm.team" placeholder="氏族">
        <el-option label="一团" value="一团"></el-option>
        <el-option label="二团" value="二团"></el-option>
        <el-option label="三团" value="三团"></el-option>
        <el-option label="四团" value="四团"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="游戏ID" prop="nickname">
      <el-input  v-model="registerForm.nickname"></el-input>
    </el-form-item>
    <el-form-item label="QQ" prop="qq">
      <el-input v-model="registerForm.qq"></el-input>
    </el-form-item>
    <el-form-item label="性别" prop="sex">
      <el-radio-group v-model="registerForm.sex">
        <el-radio label="男" value="男"></el-radio>
        <el-radio label="女" value="女"></el-radio>
      </el-radio-group>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="submitForm('ruleForm')"
      >Create</el-button
      >
      <el-button @click="resetForm('ruleForm')">Reset</el-button>
    </el-form-item>
  </el-form>
  </el-card>
</template>

<script>
import {reactive, toRefs} from "@vue/reactivity";
import {useRouter} from "vue-router";
import {ref} from "vue";
import {POST} from "../utils/Request";
import {Error, Success} from "../utils/notify";

export default {
  name: "Register",
  setup(){
    const router = useRouter();
    const state = reactive({
      registerForm:{
        username:'',
        password:'',
        nickname:'',
        team:'',
        qq:'',
        sex:ref('男')
      },
      rules:{
        username: [{
          required:true,
          message:"请输入用户名",
          trigger:'blur'
        },{
          min:3,
          max:15,
          message: "请输入3~15个字符",
          trigger: 'blur'
        }],
        password: [{
          required:true,
          message:"请输入密码",
          trigger:'blur'
        },{
          min:3,
          max:15,
          message: "请输入3~15个字符",
          trigger: 'blur'
        }],
        team:[{
          required:true,
          message:"请选择所在氏族",
          trigger:'change'
        }],
        nickname: [{
          required:true,
          message:"请输入游戏ID",
          trigger:'blur'
        },{
          min:3,
          max:25,
          message: "请输入3~25个字符",
          trigger: 'blur'
        }],
        qq:[{
          required:true,
          message:"请输入您的QQ",
          trigger:'blur'
        },{
          min:5,
          max:15,
          message: "请输入正确的QQ号码",
          trigger: 'blur'
        }],
        sex:[{
          required:true,
          message:"请选择您的性别",
          trigger:'change'
        }]
      }
    })
    const methods = {
       submitForm(formName){
        this.$refs[formName].validate((valid)=>{
          if (valid) {
            this.doRegister();
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields()
      },
      async doRegister(){
         let resp = await POST('/common/register',state.registerForm);
         if(resp.code === 1){
           Success(resp.msg)
           setTimeout(function () {
             router.push("/login")
           },1500)
         }else {
           Error(resp.msg)
         }
      }
    }
    return {
      ...toRefs(state),
      ...methods
    }
  }
}
</script>

<style scoped>
.box-card {
  margin: 100px auto;
  max-width: 800px;
  min-width: 400px;
  padding-top: 30px;
}
</style>